<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>发送请求</title>
    <style>
        /* 设置页面的基础样式 */
        body {
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; /* 设置字体 */
            margin: 0; /* 去除默认的外边距 */
            padding: 0; /* 去除默认的内边距 */
            background: linear-gradient(135deg, #a2c2e0, #e0f7fa); /* 清新的浅蓝色渐变背景 */
            display: flex; /* 使用 Flexbox 布局 */
            justify-content: center; /* 水平居中对齐 */
            align-items: center; /* 垂直居中对齐 */
            height: 100vh; /* 视口高度 */
            overflow: auto; /* 允许页面滚动 */
        }

        .container {
            text-align: center; /* 文本居中对齐 */
            background: #fff; /* 白色背景 */
            padding: 20px; /* 内边距 */
            border-radius: 8px; /* 圆角边框 */
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); /* 轻微的阴影效果 */
            display: flex; /* 使用 Flexbox 布局 */
            flex-direction: column; /* 垂直方向排列 */
            align-items: center; /* 水平居中对齐 */
            gap: 10px; /* 元素之间的间距 */
            max-width: 100%; /* 确保容器不会超出视口宽度 */
            box-sizing: border-box; /* 包含边框和内边距 */
        }

        .input-group {
            display: flex; /* 使用 Flexbox 布局 */
            gap: 10px; /* 输入框和按钮之间的间距 */
            width: 100%; /* 容器宽度 */
            max-width: 600px; /* 最大宽度 */
            margin-bottom: 20px; /* 底部外边距 */
        }

        input[type="text"] {
            flex: 1; /* 使输入框扩展以填充剩余空间 */
            padding: 15px; /* 内边距 */
            border: 1px solid #ddd; /* 边框样式 */
            border-radius: 4px; /* 圆角边框 */
            font-size: 16px; /* 字体大小 */
        }

        button {
            padding: 15px 20px; /* 内边距 */
            border: none; /* 无边框 */
            border-radius: 4px; /* 圆角边框 */
            background-color: #007bff; /* 按钮背景色 */
            color: #fff; /* 字体颜色 */
            font-size: 16px; /* 字体大小 */
            cursor: pointer; /* 鼠标指针 */
        }

        button:hover {
            background-color: #0056b3; /* 悬停时背景色变化 */
        }

        #responseContainer {
            margin-top: 20px; /* 上边距 */
            text-align: left; /* 文本左对齐 */
            width: 100%; /* 容器宽度 */
            max-width: 600px; /* 最大宽度 */
            overflow-y: auto; /* 允许垂直滚动 */
            max-height: 400px; /* 最大高度 */
            box-sizing: border-box; /* 包含边框和内边距 */
        }

        #responseContainer ul {
            list-style-type: none; /* 无列表标记 */
            padding: 0; /* 内边距 */
            margin: 0; /* 外边距 */
        }

        #responseContainer li {
            padding: 10px; /* 内边距 */
            border-bottom: 1px solid #ddd; /* 底部边框 */
        }

        #responseContainer a {
            color: #007bff; /* 链接颜色 */
            text-decoration: none; /* 去除下划线 */
        }

        #responseContainer a:hover {
            text-decoration: underline; /* 悬停时显示下划线 */
        }
    </style>
</head>
<body>
    <!-- 主容器，包含输入框和按钮 -->
    <div class="container">
        <!-- 输入框和按钮的组合 -->
        <div class="input-group">
            <!-- 文本输入框 -->
            <input type="text" id="textInput" placeholder="输入内容">
            <!-- 发送按钮 -->
            <button onclick="sendRequest()">发送</button>
        </div>
        <!-- 显示响应数据的区域 -->
        <div id="responseContainer">
            <!-- 用于展示响应数据的列表 -->
            <ul id="responseList"></ul>
        </div>
    </div>

    <script>
        // 获取文本输入框和响应数据容器元素
        const textInput = document.getElementById('textInput');
        const responseList = document.getElementById('responseList');

        // 为文本输入框添加 input 事件监听器
        textInput.addEventListener('input', function () {
            // 每当文本输入框内容发生变化时，调用 sendRequest 函数
            // sendRequest();
        });

        // 定义发送请求的函数
        function sendRequest() {
            // 获取文本输入框中的内容
            const text = textInput.value;

            // 使用 fetch API 发送 POST 请求到指定的 URL
            fetch('http://192.168.6.211:1234/kandy/webSearch', {
                method: 'POST', // 请求方法为 POST
                headers: {
                    'Content-Type': 'text/plain', // 设置请求内容类型为纯文本
                },
                body: text, // 请求体为文本输入框的内容
            })
                .then(response => response.json()) // 处理响应，将其转换为 JSON
                .then(data => {
                    // 清空现有的列表内容
                    responseList.innerHTML = '';

                    // 遍历 JSON 数据并动态创建列表项
                    data.forEach(item => {
                        // 解析每个项为对象
                        const parsedItem = JSON.parse(item);

                        // 创建列表项
                        const listItem = document.createElement('li');
                        let docid = parsedItem.docid; // 文章编号
                        let title = parsedItem.title; // 标题
                        let content = parsedItem.content; // 内容
                        let link = parsedItem.link; // 链接

                        // 限制 title 和 content 键的内容显示最多 100 个字符
                        if (title.length > 100) {
                            title = title.substring(0, 100) + '...'; // 截断标题
                        }
                        if (content.length > 100) {
                            content = content.substring(0, 100) + '...'; // 截断内容
                        }

                        // 创建列表项内容
                        listItem.innerHTML = `
                            <strong>文章编号:</strong>${docid}<br>
                            <strong>Title:</strong> ${title}<br>
                            <strong>Link:</strong> <a href="${link}" target="_blank">${link}</a><br>
                            <strong>Content:</strong> ${content}<br>
                        `;

                        // 将列表项添加到响应数据列表中
                        responseList.appendChild(listItem);
                    });
                })
                .catch((error) => console.error('Error:', error)); // 处理错误，输出错误信息到控制台
        }
    </script>
</body>
</html>
